<template>
  <div>
    <el-form
      :model="formPTLiat"
      class="demo-form-inline"
      label-position="right"
      label-width="136px"
      ><el-row>
        <el-col :span="24"
          ><el-form-item label="P&L" prop="businessLine">
            <!-- @change="businessLineChange($event)" -->
            <el-radio-group
              v-model="formPTLiat.businessLine"
              @change="businessLineChange($event)"
              fill="#3A62D7"
              style="margin-bottom: 30px"
            >
              <el-radio-button label="ALL">ALL</el-radio-button>
              <el-radio-button label="APPS-AUTO">APPS-AUTO</el-radio-button>
              <el-radio-button label="APPS-CPRD-MNC"
                >APPS-CPRD MNC</el-radio-button
              >
              <el-radio-button label="APPS-MLS">APPS-MLS</el-radio-button>
              <el-radio-button label="APPS-CPRD Local"
                >APPS-CPRD LOCAL</el-radio-button
              >
              <el-radio-button label="APPS-OTHERS">APPS-OTHERS</el-radio-button>
              <el-radio-button label="INVENT">INVENT</el-radio-button>
            </el-radio-group></el-form-item
          ></el-col
        >
      </el-row>
      <el-row :gutter="10" v-if="!isShow">
        <el-col :span="8">
          <el-form-item label="sub P&L" prop="serviceLine">
            <el-select
              v-model="formPTLiat.serviceLine"
              clearable
              style="width: 100%"
              placeholder="请选择"
            >
              <el-option
                v-for="item in busServiceLineOption"
                :label="item.label"
                :value="item.value"
                :key="item.value"
              /> </el-select></el-form-item
        ></el-col>
        <el-col :span="8"
          ><el-form-item label="Account" prop="account">
            <el-select
              v-model="formPTLiat.account"
              style="width: 100%"
              clearable
              placeholder="请选择"
            >
              <el-option
                v-for="item in accountOptions"
                :label="item.label"
                :value="item.value"
                :key="item.value"
              /> </el-select></el-form-item
        ></el-col>
        <el-col :span="8"
          ><el-form-item label="Domain" prop="domain">
            <el-input
              v-model="formPTLiat.domain"
              placeholder="请输入"
              clearable />
            <!-- <el-select
              v-model="formPTLiat.domain"
              style="width: 100%"
              placeholder="请选择"
            >
              <el-option
                v-for="item in contractTypeOptions"
                :label="item.label"
                :value="item.value"
                :key="item.value"
              /> </el-select> -->
              </el-form-item
        ></el-col>
      </el-row>
      <el-row :gutter="10" v-if="!isShow">
        <el-col :span="8"
          ><el-form-item label="Client's Name">
            <el-input
              v-model="formPTLiat.clientsName"
              placeholder="请输入"
              clearable /></el-form-item
        ></el-col>
        <el-col :span="8"
          ><el-form-item label="Project Name">
            <el-input
              v-model="formPTLiat.projectName"
              placeholder="请输入"
              clearable /></el-form-item
        ></el-col>
        <el-col :span="8"
          ><el-form-item label="Project Code">
            <el-input
              v-model="formPTLiat.projectCode"
              placeholder="请输入"
              clearable /></el-form-item
        ></el-col>
      </el-row>
      <el-row :gutter="10" v-if="!isShow">
        <el-col :span="8"
          ><el-form-item label="DE">
            <el-input
              v-model="formPTLiat.deName"
              placeholder="请输入"
              clearable /></el-form-item
        ></el-col>
        <el-col :span="8"
          ><el-form-item label="EM">
            <el-input
              v-model="formPTLiat.emName"
              placeholder="请输入"
              clearable /></el-form-item
        ></el-col>
        <el-col :span="8"
          ><el-form-item label="CSM">
            <el-input
              v-model="formPTLiat.csmName"
              placeholder="请输入"
              clearable /></el-form-item
        ></el-col>
      </el-row>
      <el-row :gutter="10" v-if="!isShow">
        <el-col :span="8"
          ><el-form-item label="Project Type" prop="ProjectType">
            <el-select
              v-model="formPTLiat.projectType"
              style="width: 100%"
              placeholder="请选择"
            >
              <el-option
                v-for="item in projectTypeOptions"
                :label="item.label"
                :value="item.value"
                :key="item.value"
              /> </el-select></el-form-item
        ></el-col>
        <el-col :span="8"
          ><el-form-item label="Thor ID">
            <el-input
              v-model="formPTLiat.thorId"
              placeholder="请输入"
              clearable /></el-form-item
        ></el-col>
        <el-col :span="8"
          ><el-form-item label="Contract Type" prop="contractType">
            <el-select
              v-model="formPTLiat.contractType"
              style="width: 100%"
              placeholder="请选择"
            >
              <el-option
                v-for="item in contractTypeOptions"
                :label="item.label"
                :value="item.value"
                :key="item.value"
              /> </el-select></el-form-item
        ></el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="8" v-if="!isShow"
          ><el-form-item label="Pursuit Leader">
            <el-input
              v-model="formPTLiat.pursuitLeader"
              placeholder="请输入"
              clearable /></el-form-item
        ></el-col>
        <el-col :span="8" v-if="!isShow"
          ><el-form-item label="Solution Owner">
            <el-input
              v-model="formPTLiat.solutionOwner"
              placeholder="请输入"
              clearable /></el-form-item
        ></el-col>
        <el-col :span="isShow ? 24 : 8">
          <div class="isShow">
            <el-link @click="more" type="primary" :underline="false"
              >{{ isShow ? '展开' : '收起' }}
              <el-icon v-if="isShow"><ArrowDown /></el-icon>
              <el-icon v-else><ArrowUp /></el-icon>
            </el-link>
          </div> </el-col
      ></el-row>
      <el-row :gutter="30">
        <el-col :span="8"></el-col>
        <el-col :span="8"></el-col>
        <el-col :span="8">
          <el-form-item class="btn-right">
            <el-button color="#3A62D7" type="primary" @click="hadleSearch()">
              查 询
            </el-button>
            <el-button @click="handleReset()"> 重 置 </el-button>
          </el-form-item></el-col
        >
      </el-row>
    </el-form>
    <div>
      <div>
        <el-button
          color="#3A62D7"
          @click="openUpload()"
          :disabled="!store.state.roleCodes.includes('Upload-PT')"
          style="height: 28px"
          type="primary"
          >Upload</el-button
        >
        <!-- <el-button
          color="#3A62D7"
          @click="addAccount()"
          style="height: 28px"
          type="primary"
          >Grab data</el-button
        > -->
      </div>
      <el-table
        max-height="334"
        :data="tableData"
        width="100%"
        border
        scrollbar-always-on
        :header-cell-style="{
          background: '#EFEFEF',
          color: '#101010',
          height: '54px',
          border: '1px solid #fff'
        }"
        :cell-style="{ height: '26px', fontSize: '12px', padding: '5px 0' }"
      >
        <!-- <el-table-column type="index" label="No." width="70" /> -->
        <el-table-column type="selection" label="Choose All" width="48" />
        <el-table-column :show-overflow-tooltip="true" fixed prop="version" label="version" />
        <el-table-column
        :show-overflow-tooltip="true"
          fixed
          prop="projectCode"
          label="Project Code"
          width="120"
        />
        <el-table-column
        :show-overflow-tooltip="true"
          fixed
          prop="clientsName"
          label="Client's Name"
          width="130"
        />
        <el-table-column
        :show-overflow-tooltip="true"
          fixed
          prop="projectName"
          label="Project Name"
          width="160"
        />
        <el-table-column
          :show-overflow-tooltip="true"
          prop="businessLine"
          label="Business Line"
          width="120"
        />
        <el-table-column
          :show-overflow-tooltip="true"
          prop="serviceLine"
          label="Service Line"
          width="180"
        />
        <el-table-column prop="account" label="Account" width="90" />
        <el-table-column
        :show-overflow-tooltip="true"
          prop="contractType"
          label="Contract Type"
          width="130"
        />
        <el-table-column :show-overflow-tooltip="true" prop="projectType" label="Project Type" width="130" />
        <el-table-column :show-overflow-tooltip="true" prop="deName" label="DE" />
        <el-table-column :show-overflow-tooltip="true" prop="emName" label="EM" />
        <el-table-column :show-overflow-tooltip="true" prop="csmName" label="CSM" />
        <el-table-column :show-overflow-tooltip="true" prop="startDate" label="Start Date" width="110" />
        <el-table-column
        :show-overflow-tooltip="true"
          prop="estimatedProjectLength"
          label="Estimated Project Length(Month)"
          width="160"
        />
        <el-table-column
        :show-overflow-tooltip="true"
          prop="estimatedEndDate"
          label="Estimated End Date"
          width="100"
        />
        <el-table-column
        :show-overflow-tooltip="true"
          prop="clientPrice"
          label="Client Price (excl.VAT&&Add.tax)"
          width="150"
        />
        <el-table-column :show-overflow-tooltip="true" prop="creationDate" label="Create Time" width="160" />
        <el-table-column :show-overflow-tooltip="true" prop="createdBy" label="Created by" width="120" />
        <el-table-column :show-overflow-tooltip="true"
          prop="lastUpdateDate"
          label="Uodate time"
          width="160"
        />
        <el-table-column :show-overflow-tooltip="true" prop="lastUpdatedBy" label="Updated by" width="120" />
        <el-table-column fixed="right" label="Operation" width="232">
          <template #default="scope">
            <!-- <el-button
              size="small"
              color="#3A62D7"
              @click="handleDetail(scope.row)"
              :disabled="!store.state.roleCodes.includes('Detail-PT')"
              >Detail</el-button
            > -->
            <!-- <el-button
              size="small"
              color="#3A62D7"
              @click="handleUpdate(scope.row)"
              >Update</el-button
            > -->
            <el-button
              size="small"
              color="#BD3124"
              :disabled="!store.state.roleCodes.includes('Detele-PT')"
              @click="handleDelete(scope.row)"
              >Delete</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 50, 100, 200]"
          small="small"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <el-dialog
      v-model="centerDialogVisible"
      title="Upload PT"
      width="38%"
      align-center
    >
      <div class="Upload-PT">
        <div class="uploadHeader">
          <div class="left">
            <div>1、下载PT模板，填写信息</div>
            <img style="width: 100px" src="../../assets/file.png" alt="" />
            <el-button @click="handleDownload()">Download</el-button>
          </div>
          <div class="midLine"></div>
          <div class="right">
            <div>2、上传填写好的PT文件</div>
            <img style="width: 100px" src="../../assets/file.png" alt="" />
            <!-- http://ec2-43-192-41-93.cn-northwest-1.compute.amazonaws.com.cn:9001/api -->
            <el-upload
              ref="upload"
              v-model:file-list="fileList"
              class="upload-demo"
              action=""
              :on-remove="handleRemove"
              :on-change="handleChange"
              :before-upload="beforeUpload"
              :http-request="httpRequest"
              :limit="1"
            >
              <el-button
                style="width: 93px"
                class="uploadButton"
                color="#3A62D7"
                type="primary"
                >Upload</el-button
              >
            </el-upload>
          </div>
        </div>
        <div class="progressBox" v-if="complete !== 0">
          <div class="samestyle">Uploading......</div>
          <el-progress
            class="samestyle"
            :stroke-width="14"
            :percentage="complete"
            :status="uploadStatus"
          />
          <div class="samestyle" v-if="complete === 100">Success.</div>
          <div class="samestyle" v-if="uploadStatus === 'exception'">
            Failed:
          </div>
          <div class="samestyle" v-if="uploadStatus === 'exception'">
            {{ errorMsg }}
          </div>
        </div>
      </div>

      <!-- <template #footer>
        <span class="dialog-footer">
          <el-button @click="centerDialogVisible = false">Cancel</el-button>
          <el-button type="primary" @click="centerDialogVisible = false">
            Confirm
          </el-button>
        </span>
      </template> -->
    </el-dialog>
    <el-dialog
      v-model="samePTDialogVisible"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :destroy-on-close="true"
      :show-close="false"
      width="68%"
      align-center
    >
      <template #header>
        <div class="header">
          <el-icon color="#FAAC13" style="margin: 1px 10px 0 0" size="20"
            ><QuestionFilled
          /></el-icon>
          <div style="font-weight: 700; font-size: 14px">
            Please check if the project has already exist in the system, choose
            the same project and click the sameproject and click "Cover"; if
            this is a new project, please click "Skip"
          </div>
        </div>
      </template>
      <el-table
        max-height="334"
        :data="samePTData"
        width="100%"
        class="tabCheck"
        border
        scrollbar-always-on
        :header-cell-style="{
          background: '#EFEFEF',
          color: '#101010',
          height: '54px',
          border: '1px solid #fff'
        }"
        :cell-style="{ height: '26px', fontSize: '12px', padding: '5px 0' }"
      >
        <!-- <el-table-column type="index" label="No." width="70" /> -->
        <!-- <el-table-column type="selection" label="Choose All" width="48" /> -->

        <el-table-column fixed label="" width="50" align="center">
          <template #default="scope">
            <el-radio
              v-model="currentFactor"
              :label="scope.row"
              @input="clickChange(scope.row)"
              >{{ '' }}</el-radio
            >
          </template></el-table-column
        >
        <el-table-column fixed prop="version" label="version" />
        <el-table-column fixed prop="thorId" label="Thor ID" />
        <el-table-column
          fixed
          prop="projectCode"
          label="Project Code"
          width="120"
        />
        <el-table-column
          fixed
          prop="clientsName"
          label="Client's Name"
          width="130"
        />
        <el-table-column
          fixed
          prop="projectName"
          label="Project Name"
          width="160"
        />
        <el-table-column prop="account" label="Account" width="90" />
        <el-table-column
          prop="contractType"
          label="Contract Type"
          width="130"
        />
        <el-table-column prop="projectType" label="Project Type" width="130" />
        <el-table-column prop="deName" label="DE" />
        <el-table-column prop="emName" label="EM" />
        <el-table-column prop="csmName" label="CSM" />
        <el-table-column prop="startDate" label="Start Date" width="110" />
        <el-table-column
          prop="estimatedProjectLength"
          label="Estimated Project Length(Month)"
          width="160"
        />
        <el-table-column
          prop="estimatedEndDate"
          label="Estimated End Date"
          width="100"
        />
        <el-table-column
          prop="clientPrice"
          label="Client Price (excl.VAT&&Add.tax)"
          width="150"
        />
        <el-table-column prop="creationDate" label="Create Time" width="160" />
        <el-table-column prop="createdBy" label="Created by" width="120" />
        <el-table-column
          prop="lastUpdateDate"
          label="Uodate time"
          width="160"
        />
        <el-table-column prop="lastUpdatedBy" label="Updated by" width="120" />
      </el-table>
      <div class="pagination">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 50, 100, 200]"
          small="small"
          layout="total, sizes, prev, pager, next, jumper"
          :total="sameTotal"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="samePTDialogVisible = false">Skip</el-button>
          <el-button
            :disabled="!checked"
            type="primary"
            color="#3A62D7"
            @click="handleChecked()"
          >
            Cover
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { reactive, ref, onMounted } from 'vue'
import { ArrowUp, ArrowDown, QuestionFilled } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
import {
  getPTList,
  downLoadExcel,
  uploadPTexcel,
  deleteExcel,
  coverPT
} from '@/api/PTList'
import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
import { useStore } from 'vuex'
const store = useStore()
import axios from 'axios'

const router = useRouter()
let busServiceLineOption = ref([])
const currentFactor = ref('')
let checked = ref(false)

onMounted(async () => {
  await getPTLists()
  busServiceLineOption.value = serviceLineOptions
})
const total = ref(0)
const sameTotal = ref(0)
let complete = ref(0)
let uploadStatus = ref('')
let errorMsg = ref('')
const samePTData = ref([])
let checkedRow = ref()

const clickChange = (row) => {
  console.log(row)
  if (row) {
    checked.value = true
    checkedRow.value = row
  }
}
const handleChecked = async () => {
  console.log('checkedRow', checkedRow.value)
  const res = await coverPT({ generalId: checkedRow.value.generalId })
  await getPTLists()
  samePTDialogVisible.value = false
}
let serviceLineOptions = [
  { value: 'APPS-AUTO-DAIMLER-plus', label: 'APPS-AUTO-DAIMLER-plus' },
  { value: 'APPS-AUTO-BMW-plus', label: 'APPS-AUTO-BMW-plus' },
  { value: 'APPS-AUTO-FR-n-Tier1', label: 'APPS-AUTO-FR-n-Tier1' },
  { value: 'APPS-AUTO-VWG-plus-Non CAP', label: 'APPS-AUTO-VWG-plus-Non CAP' },
  {
    value: 'APPS-AUTO-VWG-plus-CAP CARIAD',
    label: 'APPS-AUTO-VWG-plus-CAP CARIAD'
  },
  { value: 'APPS-AUTO-East China-East', label: 'APPS-AUTO-East China-East' },
  {
    value: 'APPS-AUTO-East China-Geely&Volvo',
    label: 'APPS-AUTO-East China-Geely&Volvo'
  },
  { value: 'APPS-AUTO-GROWTH-C&I', label: 'APPS-AUTO-GROWTH-C&I' },
  { value: 'APPS-AUTO-GROWTH-OTH', label: 'APPS-AUTO-GROWTH-OTH' },
  { value: 'APPS-AUTO-JBS', label: 'APPS-AUTO-JBS' },
  { value: 'APPS-CPRD-MNC-CP&R-CP', label: 'APPS-CPRD-MNC-CP&R-CP' },
  { value: 'APPS-CPRD-MNC-CP&R-L&C', label: 'APPS-CPRD-MNC-CP&R-L&C' },
  { value: 'APPS-CPRD-MNC-CP&R-QSR', label: 'APPS-CPRD-MNC-CP&R-QSR' },
  { value: 'APPS-CPRD-MNC-R&F', label: 'APPS-CPRD-MNC-R&F' },
  { value: 'APPS-MLS-TMT-n-MFG-Non CAP', label: 'APPS-MLS-TMT-n-MFG-Non CAP' },
  {
    value: 'APPS-MLS-TMT-n-MFG-CAP SAP China',
    label: 'APPS-MLS-TMT-n-MFG-CAP SAP China'
  },
  { value: 'APPS-MLS-LS', label: 'APPS-MLS-LS' },
  { value: 'APPS-MLS-FS-Non CAP', label: 'APPS-MLS-FS-Non CAP' },
  { value: 'APPS-MLS-FS-CAP HSBC', label: 'APPS-MLS-FS-CAP HSBC' },
  { value: 'APPS-CPRD-Local-BSM', label: 'APPS-CPRD-Local-BSM' },
  { value: 'APPS-CPRD-Local-CPRD', label: 'APPS-CPRD-Local-CPRD' },
  { value: 'APPS-CPRD-Local-OTH', label: 'APPS-CPRD-Local-OTH' },
  { value: 'APPS-OTHERS', label: 'APPS-OTHERS' },
  { value: 'INVENT', label: 'INVENT' }
]
let accountOptions = [
  { value: 'BMW', label: 'BMW' },
  { value: 'GreatWall', label: 'GreatWall' },
  { value: 'Daimler', label: 'Daimler' },
  { value: 'Michelin', label: 'Michelin' },
  { value: 'BOSCH', label: 'BOSCH' },
  { value: 'Faurecia', label: 'Faurecia' },
  { value: 'Goodyear', label: 'Goodyear' },
  { value: 'Stellantis', label: 'Stellantis' },
  { value: 'Total Account', label: 'Total Account' },
  { value: 'vw', label: 'vw' },
  { value: 'CARIAD', label: 'CARIAD' },
  { value: 'JSS', label: 'JSS' },
  { value: 'HSBC', label: 'HSBC' },
  { value: 'Didi', label: 'Didi' },
  { value: 'FAW&DF&ChangAn', label: 'FAW&DF&ChangAn' },
  { value: 'SFDC German', label: 'SFDC German' },
  { value: 'Geely-Volvo', label: 'Geely-Volvo' },
  { value: 'SAIC', label: 'SAIC' },
  { value: 'JLR', label: 'JLR' },
  { value: 'Ford', label: 'Ford' },
  { value: 'AB Volvo', label: 'AB Volvo' },
  { value: 'Chery', label: 'Chery' },
  { value: 'Sandvik', label: 'Sandvik' },
  { value: 'JBS', label: 'JBS' },
  { value: 'FOSUN FFT', label: 'FOSUN FFT' },
  { value: 'GAC', label: 'GAC' },
  { value: 'LINDE', label: 'LINDE' },
  { value: 'Foton', label: 'Foton' },
  { value: 'SAP China', label: 'SAP China' },
  { value: 'TE Connectivity', label: 'TE Connectivity' },
  { value: 'Huawei', label: 'Huawei' },
  { value: 'Nokia', label: 'Nokia' },
  { value: 'Wuxi', label: 'Wuxi' },
  { value: 'Sanofi', label: 'Sanofi' },
  { value: 'SCB', label: 'SCB' },
  { value: 'BI', label: 'BI' },
  { value: 'GSK', label: 'GSK' },
  { value: 'Bayer', label: 'Bayer' },
  { value: 'Fosun', label: 'Fosun' },
  { value: 'Fresenius', label: 'Fresenius' },
  { value: 'ProBio', label: 'ProBio' },
  { value: 'Gilead', label: 'Gilead' },
  { value: 'Infineon', label: 'Infineon' },
  { value: 'Schlumberger', label: 'Schlumberger' },
  { value: 'Schneider', label: 'Schneider' },
  { value: 'CRC', label: 'CRC' },
  { value: 'Yili', label: 'Yili' },
  { value: 'Tsingtao Beer', label: 'Tsingtao Beer' },
  { value: 'Bailian', label: 'Bailian' },
  { value: 'Capitaland', label: 'Capitaland' },
  { value: 'GLP', label: 'GLP' },
  { value: 'JoyCity', label: 'JoyCity' },
  { value: 'Wangfujing', label: 'Wangfujing' },
  { value: 'UBR', label: 'UBR' },
  { value: 'EDUCATION', label: 'EDUCATION' },
  { value: 'Burberry', label: 'Burberry' },
  { value: 'H&M', label: 'H&M' },
  { value: 'IKEA', label: 'IKEA' },
  { value: "McDonald's", label: "McDonald's" },
  { value: 'LDC', label: 'LDC' },
  { value: 'LVMH', label: 'LVMH' },
  { value: 'P&G', label: 'P&G' },
  { value: "L'oreal", label: "L'oreal" },
  { value: 'Unilever', label: 'Unilever' },
  { value: 'Richemont', label: 'Richemont' },
  { value: 'Starbucks', label: 'Starbucks' },
  { value: 'YUM', label: 'YUM' },
  { value: 'Other Accounts', label: 'Other Accounts' }
]
let contractTypeOptions = [
  { value: 'Frame Contract', label: 'Frame Contract' },
  { value: 'Contract', label: 'Contract' },
  { value: 'PO', label: 'PO' }
]
let projectTypeOptions = [
  { value: 'T and M', label: 'T and M' },
  { value: 'Fixed Price', label: 'Fixed Price' },
  { value: 'Fixed Monthly Fee', label: 'Fixed Monthly Fee' },
  { value: 'T and M with Cap', label: 'T and M with Cap' },
  { value: 'Performance Based/Shared', label: 'Performance Based/Shared' }
]

const upload = ref(null) //dom实例
const tableData = ref([])
let currentPage = ref(1)
let pageSize = ref(10)
const centerDialogVisible = ref(false)
const samePTDialogVisible = ref(false)

const handleDetail = (row) => {
  router.push({
    path: '/PTList/PTListDetail',
    query: row
  })
}
const businessLineChange = async (e) => {
  // console.log(e);
  if (e !== 'ALL') {
    console.log('bussinessline：', e)
    busServiceLineOption.value = []
    serviceLineOptions.forEach((item, index) => {
      if (item.value.includes(e)) {
        busServiceLineOption.value.push(item)
      }
    })
  } else {
    busServiceLineOption.value = serviceLineOptions
  }
  formPTLiat.value.businessLine = e
  await getPTLists()
}
const openUpload = () => {
  centerDialogVisible.value = true
  upload.value.clearFiles()
  complete.value = 0
  uploadStatus.value = ''
  errorMsg.value = ''
}
const handleRemove = (file) => {
  complete.value = 0
  uploadStatus.value = ''
  errorMsg.value = ''
}

const handleDelete = async (row) => {
  ElMessageBox.confirm('确认删除吗?', 'Warning', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning',
    confirmButtonClass: 'el-button--confirm',
    cancelButtonClass: 'el-button--cancel'
  }).then(async () => {
    const res = await deleteExcel({ Ids: row.generalId })
    if (res.data.code === '0') {
      ElMessage.success(res.data.msg)
      getPTLists()
    } else {
      ElMessage.error(res.data.msg)
    }
  })
}
const fileList = ref([])

let formPTLiat = ref({
  account: '',
  businessLine: 'ALL',
  clientPrice: '',
  clientsName: '',
  contractType: '',
  createdBy: '',
  creationDate: '',
  csmName: '',
  deName: '',
  emName: '',
  estimatedEndDate: '',
  estimatedProjectLength: '',
  lastUpdateDate: '',
  lastUpdatedBy: '',
  pageNo: 1,
  pageSize: 10,
  projectCode: '',
  projectName: '',
  projectType: '',
  serviceLine: '',
  startDate: '',
  thorId: '',
  version: '',
  dataList: []
})

const httpRequest = async (item) => {
  console.log('item', item)
  let formData = new FormData()
  //获取上传文件
  formData.append('file', item.file) //添加文件对象
  formData.append('pageNo', 1)
  formData.append('pageSize', 10)
  console.log('formData', formData)
  // const res = await
  axios({
    method: 'POST',
    url: '/admin/api/pt/uploadExcel',
    headers: {
      'Content-Type': 'multipart/form-data'
    },
    data: formData,
    onUploadProgress: (progressEvent) => {
      let cont = parseInt((progressEvent.loaded / progressEvent.total) * 100)
      if (cont < 100) {
        complete.value = cont
      }
      // 重点二：onProgress()方法需要以上方接收的形参来调用
      // 这个方法有一个参数"percent"，给他进度值 complete 即可
      // item.onProgress({ percent: complete })
    }
  })
    .then(async (res) => {
      if (res.data.code === '0') {
        complete.value = 100
        uploadStatus.value = 'success'
        await getPTLists()
        centerDialogVisible.value = false
        if (res.data.data.records.length > 0) {
          console.log('111111res', res)
          checked.value = false
          checkedRow.value = ''
          samePTDialogVisible.value = true
          samePTData.value = res.data.data.records
          sameTotal.value = res.data.data.total
        }
      }
      // else if (res.data.code === '-1') {
      //   uploadStatus.value = 'exception'
      //   errorMsg.value = res.data.msg
      // }
      else {
        uploadStatus.value = 'exception'
        errorMsg.value = res.data.msg
      }
    })
    .catch((error) => {
      uploadStatus.value = 'exception'
      console.log('error', error)
      errorMsg.value = '服务器错误，请重新上传'
    })
  // const res = await uploadPTexcel(formData)
}
const handleChange = (file, fileList) => {
  console.log('filechange', file)
}
const hadleSearch = async () => {
  console.log(formPTLiat)
  await getPTLists()
}
const handleReset = async () => {
  formPTLiat.value = {
    account: '',
    businessLine: 'ALL',
    clientPrice: '',
    clientsName: '',
    contractType: '',
    createdBy: '',
    creationDate: '',
    csmName: '',
    deName: '',
    emName: '',
    estimatedEndDate: '',
    estimatedProjectLength: '',
    lastUpdateDate: '',
    lastUpdatedBy: '',
    pageNo: 1,
    pageSize: 10,
    projectCode: '',
    projectName: '',
    projectType: '',
    serviceLine: '',
    startDate: '',
    thorId: '',
    version: '',
    dataList: []
  }
  await getPTLists()
}
const beforeUpload = (file) => {
  // console.log('file', file)
  const Xls = file.name.split('.')
  if (Xls[Xls.length-1] !== 'xls' && Xls[Xls.length-1] !== 'xlsx' && Xls[Xls.length-1] !== 'xlsm') {
    ElMessage({
      message: '请上传excel格式的文件!',
      type: 'error'
    })
    return false
  } else if (file.size / 1024 / 1024 > 250) {
    ElMessage({
      message: '请上传250M以下的文件!',
      type: 'error'
    })
    return false
  }
  return true
}

const handleDownload = async () => {
  const res = await downLoadExcel()
  const url = window.URL.createObjectURL(new Blob([res.data]))
  const link = document.createElement('a')
  link.href = url
  link.setAttribute('download', 'PT模板.xlsm') // 设置下载文件的文件名
  document.body.appendChild(link)
  link.click()
}

const getPTLists = async () => {
  const res = await getPTList(formPTLiat.value)
  // console.log(res)
  tableData.value = res.data.data.records
  total.value = res.data.data.total
}

const isShow = ref(true)

const more = () => {
  isShow.value = !isShow.value
}

const handleSizeChange = (val) => {
  pageSize.value = val
  formPTLiat.pageSize = val
  getPTLists()
  console.log(`${val} 条每页`)
}
const handleCurrentChange = (val) => {
  currentPage.value = val
  formPTLiat.pageNo = val
  getPTLists()
  console.log(`页码: ${val}`)
}
</script>

<style scoped lang="scss">
.Upload-PT {
  display: flex;
  flex-direction: column;
}
.uploadHeader {
  display: flex;
  justify-content: space-between;
  .left,
  .right {
    display: flex;
    // justify-content: space-between;
    flex-direction: column;
    align-items: center;
    padding: 0 45px;
  }
  .left img,
  .right img {
    margin-top: 20px;
  }
  .left img {
    margin-bottom: 35px;
  }
  .midLine {
    border: 1px solid #e6e6e6;
  }
}
.progressBox .samestyle {
  margin-top: 10px;
  font-size: 14px;
  font-weight: 700;
}
.upload-demo {
  display: flex;
  flex-direction: column;
  justify-content: center;

  .uploadButton {
    position: relative;
    bottom: -35px;
  }
}
::v-deep .el-upload-list {
  top: -40px;
  width: 150px;
  overflow: hidden;
}
.el-table {
  margin-top: 20px;
}
.tabCheck {
  margin: -20px 0 0 0;
}
.btn-right {
  float: right;
  margin-top: 10px;
  .el-button {
    height: 28px;
    padding: 0 20px;
  }
}
::v-deep .demo-form-inline {
  font-weight: 700;
}
::v-deep .el-form-item__label {
  color: #101010;
}
.isShow {
  float: right;
  margin-top: 6px;
}
.el-radio-button {
  margin: 0 10px;
}
::v-deep .el-radio-button__inner {
  border: none;
  overflow: hidden;
  border-radius: 5px;
}
::v-deep .el-radio-button:last-child .el-radio-button__inner {
  border-radius: 5px;
}
::v-deep .el-radio-button__original-radio:checked + .el-radio-button__inner {
  border: none;
  border-radius: 5px;
}
::v-deep .el-radio-group {
  margin-bottom: 4px !important;
}
.pagination {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 12px;
}
.header {
  display: flex;
}
</style>

<style lang="scss">
.el-button--confirm {
  background: #3a62d7 !important;
  border: none !important;
}
.el-button--cancel,
.el-button--confirm {
  height: 28px !important;
  font-size: 14px !important;
  width: 62px;
}
</style>
